<template>
	<view class="box">
		<view class="avator">
			<text>头像</text>
			<view @click="upavator">
				<u-avatar :src="userinfo.avatar" size="80rpx" shape="circle"></u-avatar>
			</view>
		</view>
		<view class="self_info">
			<u-cell-group>
				<u-cell :titleStyle="{color:'#c2d5ff'}" @click="inputshow" :isLink="true" title="昵称"
					:value="userinfo.nickname ?  userinfo.nickname :'用户999' "></u-cell>
				<u-cell :titleStyle="{color:'#c2d5ff'}"  @click="showpicke" :isLink="true" title="性别" :value="sex ? sex:'保密'"></u-cell>
				<u-cell :titleStyle="{color:'#c2d5ff'}"  @click="showdate" :isLink="true" title="出生年月"
					:value="birthday ? birthday: '1970-01-01' "></u-cell>
				<u-cell :titleStyle="{color:'#c2d5ff'}"  @click="showperson" :isLink="true" title="个性签名"
					:value="userinfo.introduce ? userinfo.introduce:'很神秘什么也不说'"></u-cell>
				<u-cell :titleStyle="{color:'#c2d5ff'}"  @click="showschool" :isLink="true" title="学校"
					:value="userinfo.school ? userinfo.school:'无'"></u-cell>
			</u-cell-group>
		</view>
		<view class="other_compentens">
			<!-- 性别选择 -->
			<view>
				<u-picker keyName="text" @close="cancle" :closeOnClickOverlay="true" @confirm="confirm" @cancel="cancle"
					:show="show" :columns="columns"></u-picker>

			</view>
			<!-- 日期选择 -->
			<view>
				<u-datetime-picker :show="showdatetime" v-model="value1" mode="date" :minDate="120000000"
					:maxDate="Date.now()" @confirm="dateconfirm" @cancel="datecancel" :closeOnClickOverlay='true'
					@close="datecancel"></u-datetime-picker>

			</view>
			<view class="otherinput">
				<u-popup @close="cancleinput" :show="Showinput" mode="center" :closeable='true' :round="10">
					<view class="inputinfo">
						<view class="top" style="height: 300prx;  width: 400rpx;">
							<text>{{updatainfo}}</text>
						</view>
						<view class="moddile" v-if="switchinfo==0 ? true:false">
							<u-input placeholder="请输入内容" border="surround" v-model="valueinput" maxlength="8"></u-input>

						</view>
						<view v-else class="textarea">
							<u--textarea height="150rpx" count v-model="identity" :maxlength="30" placeholder="展示你的个性吧~~"></u--textarea>
						</view>
						<view class="buttom">
							<u-button :disabled="disaabled" @click="updateinfo" type="primary" text="修改"></u-button>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		formatDate
	} from "@/utils/time.js"
	import {
		backindex
	} from "@/utils/backindex.js"
	const db = uniCloud.database()
	export default {
		data() {
			return {
				show: false,
				showdatetime: false,
				value1: Number(new Date()),
				Showinput: false,
				columns: [
					[{
							text: '保密',
							id: 0
						},
						{
							text: '男',
							id: 1
						},
						{
							text: '女',
							id: 2
						}
					]
				],
				valueinput: "",
				//个性签名
				identity: "",
				//0输入框，1文本域
				switchinfo: 0,
				//修改时的提示信息
				updatainfo: '',
				userinfo: [],
				//禁用防止频繁点击
				disaabled: false
			};
		},
		onLoad() {
			uni.showLoading({
			})
			this.getuserinfo().then(res=>{uni.hideLoading()})
		},
		watch: {
			userinfo:{
				immediate:false,
				handler: function(val, oldVal) { 
					console.log('变了')
					uni.$emit('update',{msg:'页面更新'})
				},
				deep:true
			},
		},
		computed: {
			sex() {
				if (this.userinfo.gender == 0) {
					return '保密'
				}
				if (this.userinfo.gender == 1) {
					return '男'
				}
				if (this.userinfo.gender == 2) {
					return '女'
				}
			},
			birthday() {
				if (this.userinfo.brithday) {
					return formatDate(this.userinfo.brithday)
				} else {
					return formatDate(0)
				}
			}
		},
		methods: {
			//获取用户信息
			async getuserinfo() {

				await db.collection('uni-id-users').where(`_id==$cloudEnv_uid`).field(
						'nickname,avatar,avatar_bg,brithday,introduce,school,gender')
					.get().then(res => {
						this.userinfo = res.result.data[0]
						this.disaabled = false

						
					})
			},
			showpicke() {
				this.show = true
			},
			//展示日期
			showdate() {
				this.showdatetime = true
			},
			//性别修改
			cancle(e) {
				this.show = false
			},
			//性别修改
			async confirm(e) {
				this.show = false
				// console.log(e.indexs[0])
				await db.collection('uni-id-users').where(`_id==$cloudEnv_uid`).update({
					gender: e.indexs[0]
				}).then(res => {
					uni.showToast({
						title: "修改成功"
					})
					this.getuserinfo()
				})
			},
			//日期
			async dateconfirm(e) {
				this.showdatetime = false
				console.log(e.value, '23s')
				await db.collection('uni-id-users').where(`_id==$cloudEnv_uid`).update({
					brithday: e.value
				}).then(res => {
					uni.showToast({
						title: '修改成功'
					})
					this.getuserinfo()
				})

			},
			//取消日期
			datecancel(e) {
				this.showdatetime = false
			},
			//upavator修改头像
			upavator() {
				uni.chooseImage({
					count: 1,
					success: async res => {
						console.log(res);
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
						}
						let newfilename=''
						//name是否存在app和微信小程序不存在
						if(!res.tempFiles[0].name){
							//不存在，表示小程序或者app
							let filearr=res.tempFiles[0].path.split('.')
							newfilename='.'+filearr[filearr.length-1]
						}else{
							//存在，表示h5运行
							let filearr=res.tempFiles[0].name.split('.')
							newfilename='.'+filearr[filearr.length-1]
						}
							console.log(newfilename)
							await uniCloud.uploadFile({
						
							filePath: res.tempFiles[0].path,
							cloudPath: '/user_info/' + Date.now()+newfilename,
							cloudPathAsRealPath: true
						}).then(re => {
							console.log(re, '666')
							this.src = re.fileID
							db.collection('uni-id-users').where(`_id==$cloudEnv_uid`)
								.update({
									"avatar": re.fileID
								}).then(res => {
									uni.showToast({
										title: '修改成功'
									})
									this.getuserinfo()
								})
						})
					}
				})
			},
			//修改昵称
			inputshow() {
				this.switchinfo = 0
				this.Showinput = true
				this.updatainfo = "修改昵称"
			},
			//取消修改
			cancleinput() {
				this.Showinput = false
				this.valueinput = ''
			},
			//修改个性签名
			showperson() {
				this.switchinfo = 1
				this.Showinput = true
				this.updatainfo = "修改个性签名"
			},
			//修改学校
			showschool() {
				this.switchinfo = 0
				this.Showinput = true
				this.updatainfo = "修改学校"
			},
			//确认修改
			async updateinfo() {
				this.disaabled = true
				uni.showLoading({
					title: "修改中",
					mask: true
				})
				//0修改昵称
				if (this.switchinfo == 0 && this.updatainfo == "修改昵称") {

					await db.collection('uni-id-users').where(`_id==$cloudEnv_uid`).update({
						nickname: this.valueinput
					}).then(res => {
						uni.showToast({
							title: "修改成功"
						})
						this.Showinput = false
						uni.hideLoading()
						this.valueinput = ''
						
					})
				}
				//1修改个性
				if (this.switchinfo == 1) {
					console.log(this.identity)
					await db.collection('uni-id-users').where(`_id==$cloudEnv_uid`).update({
						introduce: this.identity
					}).then(res => {
						this.Showinput = false
						uni.hideLoading()
						this.identity = ''
						uni.showToast({
							title: "修改成功"
						})
					})
				}
				if (this.updatainfo == "修改学校") {

					await db.collection('uni-id-users').where(`_id==$cloudEnv_uid`).update({
						school: this.valueinput
					}).then(res => {

						this.Showinput = false
						uni.hideLoading()
						this.valueinput = ''
						uni.showToast({
							title: "修改成功"
						})


					})

				}

				this.getuserinfo()
			},
		},
	}
</script>

<style>
	page {
		background-color: #283d67;
	}
</style>
<style lang="scss" scoped>
	

	.box {

		.avator {
			display: flex;
			justify-content: space-between;
			align-items: cneter;
			height: 80rpx;
			background-color:  #354b75;
			padding: 20rpx;
			margin-top: 20rpx;
			color:#c2d5ff;
			text {
				line-height: 80rpx;
			}
		}

		/deep/ .u-cell-group__wrapper {
			background-color:  #354b75;
		}

		.other {
			margin-top: 30rpx;

			/deep/ .u-cell-group__wrapper {
				background-color: #293f69;
			}
		}

		.other_compentens {
			.otherinput {
				.inputinfo {
					margin-top: 40rpx;
					// padding: 10rpx;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;

					.top {
						display: flex;
						justify-content: center;
						font-size: 30rpx;

						text {
							color: hotpink
						}
					}

					.textarea {
						width: 100%;
						margin: 20rpx 0 20rpx 0;
					}

					.moddile {
						margin: 15rpx 0 20rpx 0;
						width: 80%;
					}

					.buttom {

						width: 150rpx;
						height: 100rpx;
					}
				}
			}
		}
	}
</style>